<template>
    <div class="warrper">
        <div class="main">
            <div class="headImg">
                <img v-lazy="headImg" alt="">
            </div>
            <div class=nickName>
                {{nickname}}
            </div>
            <div class="stars">
                <span v-for="(items, id) in starList" :key="items.id" :class="'star'+items.id">
                    <img v-lazy="items.light" alt="" class="light" v-show="items.id<=getStarNum">
                    <img v-lazy="items.dark" alt=""  v-show="items.id>getStarNum">
                </span>
            </div>
            <div class="personal" v-show="isOneself">
                <div class="assist">
                   {{getStarNums}}
                </div>
                <div class="assist_p">
                    <span v-for="(item, index) in assistList" :key="item.index">
                        <img v-lazy="item.fromHeadUrl" alt="">
                    </span>
                </div>
                <div class='harvest'>
                     <img src="http://assets.rurushishi.com/activies/bgyAct/harvest.png" alt @click="harvest">
                </div>
                <div class="myPrize" @click="myPrize">
                    <img src="http://assets.rurushishi.com/activies/bgyAct/myprizebtn.png" alt="">
                </div>
            </div>
            <div class="friend" v-show="!isOneself">
                <div class="starBtn">
                    <img src="http://assets.rurushishi.com/activies/bgyAct/darkBtn.png" alt="" @click = "powerFriend" v-show="!light">
                    <img src="http://assets.rurushishi.com/activies/bgyAct/lightBtn.png" alt="" v-show="light">
                </div>
                <div class="point">
                    <img src="http://assets.rurushishi.com/activies/bgyAct/point_icon.png" alt="">
                </div>
                <p>点亮收获幸运</p>
            </div>
            
        </div>
        <div class="return" @click="ret">
            <img src="http://assets.rurushishi.com/activies/bgyAct/return.png" alt="">
            <div class="retext">返回首页</div>
        </div>
        <Bottom :baseText="baseText"></Bottom>
        <share :isshare="isshare"></share>
    </div>
</template>
<script>
import request from "@/utils/request";
import axios from "axios";
import { mapState, mapMutations } from "vuex";
import wx from "weixin-js-sdk";
import * as config from "./config";
import Cookies from "js-cookie";
import Share from "@/components/common/Share";
import Bottom from "@/components/common/Bottom";
import Qs from "qs";
export default {
    data(){
        return{
          reOpenid: '',
          isOneself: false, //是否显示个人主页
          isLight: true,
          isshare: false, //是否提示分享
          registeroid:this.$route.query.registeroid ? this.$route.query.registeroid : '', //销售中介的openid
          light: false,
          getStarNum: 0,
          isjionDraw: false, //是否参加过大转盘抽奖
          getStarNums:'',
          baseText: config.BASE_TEXT,
          headImg:'',
          nickname:'',
          openid: Cookies.get("openid"),
        //   assist: 10,
          assistList: null,
          starList:[
              {
                id: 1,
                light: 'http://assets.rurushishi.com/activies/bgyAct/1.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/1_1.png'
              },{
                id: 2,
                light: 'http://assets.rurushishi.com/activies/bgyAct/2_88.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/2-2_88.png'
              },{
                id: 3,
                light: 'http://assets.rurushishi.com/activies/bgyAct/3_90.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/3-3_90.png'
              },{
                id: 4,
                light: 'http://assets.rurushishi.com/activies/bgyAct/4_75.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/4-4_75.png'
              },{
                id: 5,
                light: 'http://assets.rurushishi.com/activies/bgyAct/5_73.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/5-5_73.png'
              },{
                id: 6,
                light: 'http://assets.rurushishi.com/activies/bgyAct/6_67.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/6-6_67.png'
              },{
                id: 7,
                light: 'http://assets.rurushishi.com/activies/bgyAct/7_51.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/7-7_51.png'
              },{
                id: 8,
                light: 'http://assets.rurushishi.com/activies/bgyAct/8_58.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/8-8_58.png'
              },{
                id: 9,
                light: 'http://assets.rurushishi.com/activies/bgyAct/9_45.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/9-9_45.png'
              },{
                id: 10,
                light: 'http://assets.rurushishi.com/activies/bgyAct/10_42.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/10-10_42.png'
              },{
                id: 11,
                light: 'http://assets.rurushishi.com/activies/bgyAct/11_24.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/11-11_24.png'
              },{
                id: 12,
                light: 'http://assets.rurushishi.com/activies/bgyAct/12_30.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/12-12_30.png'
              },{
                id: 13,
                light: 'http://assets.rurushishi.com/activies/bgyAct/13_03.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/13-13_03.png'
              },{
                id: 14,
                light: 'http://assets.rurushishi.com/activies/bgyAct/14_09.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/14-14_09.png'
              },{
                id: 15,
                light: 'http://assets.rurushishi.com/activies/bgyAct/15_15.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/15-15_15.png'
              },{
                id: 16,
                light: 'http://assets.rurushishi.com/activies/bgyAct/16_06.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/16-16_06.png'
              },{
                id: 17,
                light: 'http://assets.rurushishi.com/activies/bgyAct/17_19.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/17-17_19.png'
              },{
                id: 18,
                light: 'http://assets.rurushishi.com/activies/bgyAct/18_12.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/18-18_12.png'
              },{
                id: 19,
                light: 'http://assets.rurushishi.com/activies/bgyAct/19_35.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/19-19_35.png'
              },{
                id: 20,
                light: 'http://assets.rurushishi.com/activies/bgyAct/20_27.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/20-20_27.png'
              },{
                id: 21,
                light: 'http://assets.rurushishi.com/activies/bgyAct/21_38.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/21-21_38.png'
              },{
                id: 22,
                light: 'http://assets.rurushishi.com/activies/bgyAct/22_53.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/22-22_53.png'
              },{
                id: 23,
                light: 'http://assets.rurushishi.com/activies/bgyAct/23_61.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/23-23_61.png'
              },{
                id: 24,
                light: 'http://assets.rurushishi.com/activies/bgyAct/24_54.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/24-24_54.png'
              },{
                id: 25,
                light: 'http://assets.rurushishi.com/activies/bgyAct/25_84.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/25-25_84.png'
              },{
                id: 26,
                light: 'http://assets.rurushishi.com/activies/bgyAct/26_79.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/26-26_79.png'
              },{
                id: 27,
                light: 'http://assets.rurushishi.com/activies/bgyAct/27_70.png',
                dark: 'http://assets.rurushishi.com/activies/bgyAct/27-27_70.png'
              }
          ]
        }
    },
    created() {
        this.isshare = this.$route.query.isShare
        ? this.$route.query.isShare
        : false;
        this.reOpenid = this.$route.query.reOpenid
        ? this.$route.query.reOpenid
        : '';
        this.setChannel(this.$route.query.channel ? this.$route.query.channel : 0);

        let _self = this;

        if(!_self.info.nickname){
                request
                    .get(_self.global.API_URL, {
                        action: "getUserinfo",
                        requestParam: {
                          
                        }
                    })
                    .then(response => {
                        _self.setInfo(response.obj.user);
                        if(response.obj.salerOrAgent){
                           _self.registeroid = _self.info.openid;
                        }
                        if (_self.info && _self.info.nickname && _self.info.nickname != '') {
                            _self.global.SHARE_TITLE = _self.info.nickname + "碧桂园27周年庆专属优惠 最大折合9折";
                        }
                        _self.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/bgyact/main?channel=' + _self.channel + '&reOpenid=' + _self.openid+'&registeroid='+_self.registeroid;
                    });
             }else{
                  _self.global.SHARE_TITLE = _self.info.nickname + "碧桂园27周年庆专属优惠 最大折合9折";
                  _self.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/bgyact/main?channel=' + _self.channel + '&reOpenid=' + _self.openid+'&registeroid='+_self.registeroid;
             }
       
        //加参加接口 判断是否参加过活动   如果参加过 isJoin设为true
        //   _self.setInfo(response.obj);
    },
    components: {
        share: Share,
        Bottom
    },
    computed: {
        ...mapState(["info", "channel"])
    },
    methods:{
        //助力自己
        harvest(){
            let _self = this;
            let query = {
                activityId: config.ACT_CODE,
                // channel: _self.channel,
                openId: Cookies.get("openid")
            };
            axios
                .post(
                `${_self.global.API_FORUM_URL}/api/lightenstar/powerMe?${Qs.stringify(
                    query
                )}`,
                {}
                )
                .then(response => {
                if(response.code==0){
                    if(!_self.isjionDraw){  //没有参加过大转盘
                         window.location.href = location.protocol + '//' + location.host + '/act/bgyact/draw?channel=' + _self.channel + '&reOpenid=' + _self.openid+'&registeroid'+_self.registeroid;
                         return;
                    };

                    if(_self.getStarNum<27){
                        _self.$nextTick(() => {
                            _self.isshare = true
                        });
                    }else if(_self.getStarNum>=27){
                        
                        // _self.$router.push({path:"./drawbig",query:{channel:_self.channel,reOpenid:_self.reOpenid}});
                        window.location.href = location.protocol + '//' + location.host + '/act/bgyact/drawbig?channel=' + _self.channel + '&reOpenid=' + _self.openid+'&registeroid'+_self.registeroid;
                     }else{
                        _self.isshare = true
                     }
                    // _self.$router.push({path:"./main",query:{channel:_self.channel,reOpenid:_self.reOpenid}});
                }else if(response.code==500){
                    _self.isshare = true
                }
            });
        },

        //朋友助力并参加
        powerFriend(){
            let _self = this;
            _self.light = true;
            let query = {
                activityId: config.ACT_CODE,
                // channel: _self.channel,
                openId: _self.reOpenid,
                fOpenId: Cookies.get("openid")
            };
            // alert(JSON.stringify(query))
            axios
                .post(
                `${_self.global.API_FORUM_URL}/api/lightenstar/powerFriend?${Qs.stringify(
                    query
                )}`,
                {}
                )
                .then(response => {
                console.info(response)
                if(response.code==0){
                    _self.light = true;
                    _self.getStarNum+1;
                    if(!_self.isjionDraw){  //没有参加过大转盘
                         window.location.href = location.protocol + '//' + location.host + '/act/bgyact/draw?channel=' + _self.channel + '&reOpenid=' + _self.openid+'&registeroid='+_self.registeroid;
                    }
                    // else{
                    //     history.go(0)
                    //      _self.light = true;
                    // }
                    //  _self.isshare = true
                    // _self.$router.push({path:"./draw",query:{channel:_self.channel,reOpenid:_self.reOpenid}});
                    // window.location.href = location.protocol + '//' + location.host + '/act/bgyact/draw?channel=' + _self.channel + '&reOpenid=' + _self.openid;
                }
            });
        },
        //参加活动
        joinAct(){
            let _self = this;
            let query = {
                activityId: config.ACT_CODE,
                channel: _self.channel,
                openId: Cookies.get("openid"),
                fromOpenId: _self.reOpenid
            };
            axios
                .post(
                `${_self.global.API_FORUM_URL}/api/activity/participate?${Qs.stringify(
                    query
                )}`,
                {}
                )
                .then(response => {
                // console.info(response)
                if(response.code==0){
                    // _self.totalcount = response.prizeCount
                }
            });
        },

        //是否参加大转盘
        isJionDraw(){
            // /api/activity/checkLuckyDraw
            let _self = this;
            let query = {
                activityId: config.ACT_CODE,
                openId: Cookies.get("openid")
            };
            axios
                .post(
                `${_self.global.API_FORUM_URL}/api/activity/checkLuckyDraw?${Qs.stringify(
                    query
                )}`,
                {}
                )
                .then(response => {
                if(response.code==0){
                    if(response.data==0){
                       //未参加过 
                    };
                    if(response.data==1){
                       //参加过大转盘
                       _self.isjionDraw = true;

                    };
                    
                    // _self.totalcount = response.prizeCount
                }
            });
        },

        //我的奖品
         myPrize(){
            // this.$router.push({path:"./prize",query:{channel:this.channel,reOpenid:this.reOpenid}});
            window.location.href = location.protocol + '//' + location.host + '/act/bgyact/prize?channel=' + this.channel + '&reOpenid=' + this.openid+'&registeroid='+this.registeroid;
        },
        //返回首页
        ret(){
            // this.$router.push({path:"./index",query:{channel:this.channel,reOpenid:this.reOpenid}});
             window.location.href = location.protocol + '//' + location.host + '/act/bgyact/index?channel=' + this.channel + '&reOpenid=' + this.openid+'&registeroid='+this.registeroid;
        },
        ...mapMutations({
            setInfo: "SET_INFO",
            setChannel: "SET_CHANNEL"
        })
    },
    mounted(){
        this.isJionDraw(); //是否参加过大转盘抽奖
        this.joinAct();
        if(!this.reOpenid||this.reOpenid===this.openid){
            this.isOneself = true;
            let _self = this;
            // _self.light = true
             request
                    .get(_self.global.API_URL, {
                        action: "getUserinfo",
                        requestParam: {
                          openid: _self.reOpenid
                        }
                    })
                    .then(response => {
                        _self.setInfo(response.obj.user);
                         _self.headImg = response.obj.user.headimgurl;
                         _self.nickname = response.obj.user.nickname;
                        // if (_self.info && _self.info.nickname && _self.info.nickname != '') {
                        //      _self.headImg = _self.info.headimgurl;
                        //      _self.nickname = _self.info.nickname;
                        // }
                        //  _self.global.SHARE_TITLE = _self.info.nickname + "碧桂园27周年庆专属优惠 最大折合9折";
                        // _self.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/bgyact/main?channel=' + _self.channel + '&reOpenid=' + _self.openid;
               });

            let query = {
                activityId: config.ACT_CODE,
                openId: Cookies.get("openid")
            };
            axios
                .get(
                `${_self.global.API_FORUM_URL}/api/lightenstar/selectCountAndList?${Qs.stringify(
                    query
                )}`,
                {}
                )
                .then(response => {
                console.info(response)
                if(response.code==0){
                    _self.assistList = response.list;
                    _self.getStarNum = response.total;
                    if(response.total<5){
                        _self.getStarNums = '还差'+(5-response.total)+'人为你点亮星星即可获得精美礼品'
                    }else if(response.total>5&&response.total<27){
                        _self.getStarNums = '还差'+(27-response.total)+'人为你点亮星星即可获得大奖'
                    }
                    // //  _self.isshare = true
                    // _self.$router.push({path:"./draw",query:{channel:_self.channel,reOpenid:_self.reOpenid}});
                }
            });
        }else{
            // alert(2)
            let _self = this;
            // _self.light = true
            let query = {
                activityId: config.ACT_CODE,
                openId: _self.reOpenid
            };
            axios
                .get(
                `${_self.global.API_FORUM_URL}/api/lightenstar/selectCountAndList?${Qs.stringify(
                    query
                )}`,
                {}
                )
                .then(response => {
                console.info(response)
                if(response.code==0){
                    _self.getStarNum = response.total;
                }
            })
            request
                    .get(_self.global.API_URL, {
                        action: "/global/User/getUserInfo",
                        requestParam: {
                          openid: _self.reOpenid
                        }
                    })
                    .then(response => {
                        _self.setInfo(response.obj.user);
                         _self.headImg = response.obj.user.headimgurl;

                         _self.nickname = response.obj.user.nickname;
                        // if (_self.info && _self.info.nickname && _self.info.nickname != '') {
                        //      _self.headImg = _self.info.headimgurl;
                        //      _self.nickname = _self.info.nickname;
                        //     _self.global.SHARE_TITLE = _self.info.nickname + "碧桂园27周年庆专属优惠 最大折合9折";
                        // }
                        //  _self.global.SHARE_TITLE = _self.info.nickname + "碧桂园27周年庆专属优惠 最大折合9折";
                        // _self.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/bgyact/main?channel=' + _self.channel + '&reOpenid=' + _self.openid;
               });
               
        };

        const _self = this
          _self.global.SHARE_CALLBACK_OK = function (type) {
            //  let _self = this;
             let query = {
                activityId: config.ACT_CODE,
                // channel: 1,
                openId: Cookies.get("openid")
              };
                axios
                    .post(
                    `${_self.global.API_FORUM_URL}/api/activity/share?${Qs.stringify(
                      query
                    )}`,
                    {
                      
                    })
                    .then(response => {
                        if(response.code==0){
                          _self.isshare = false;
                        }
                         
                    });

            };
            _self.global.SHARE_TITLE = _self.info.nickname + "碧桂园27周年庆专属优惠 最大折合9折";
            _self.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/bgyact/main?channel=' + _self.channel + '&reOpenid=' + _self.openid+'&registeroid'+_self.registeroid;
            config.initShare();
    }


}
</script>
<style lang="stylus" scoped>
.warrper{
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    background url(http://assets.rurushishi.com/activies/bgyAct/main.jpg) no-repeat;
    background-size 100% 100%
}
.main{
    width 100%
}
.headImg{
    width 100%
    padding-top 2rem
    text-align center
}
.headImg>img{
    width 2rem
    border .06rem solid #28364c
    border-radius 50%
    box-sizing border-box
}
.stars{
    position absolute
    top 0
    width 100%
    height 10rem
}
.star1{
    position absolute
    top 2rem
    left .4rem
}
.star1>img{
    width .43rem
}
.star2{
    position absolute
    top: 2rem;
    left: 1rem;
}
.star2>img{
    width .83rem
    height .81rem
}
.star3{
    position absolute
    top: 5.6rem;
    left: 2.4rem;
}
.star3>img{
    width .5rem
}
.star4{
    position absolute
    top: 4.6rem;
    left: 0.8rem;
}
.star4>img{
    width .61rem
}
.star5{
    position absolute
    top: 6rem;
    left: 4rem;
}
.star5>img{
    width .49rem
}
.star6{
    position absolute
    top: 4.6rem;
    left: 4.4rem;
}
.star6>img{
    width .49rem
}
.star7{
    position absolute
    top 0.3rem
    right 0.1rem
}
.star7>img{
    width 1.42rem
}
.star8{
    position absolute
    top: 1.6rem;
    left: 2.4rem;
}
.star8>img{
    width .52rem
}
.star9{
    position absolute
    top 5.6rem
    right 1.86rem
}
.star9>img{
    width .57rem
}
.star10{
    position absolute
    top: 3.7rem;
    left: 1.4rem;
}
.star10>img{
    width .55rem
}
.star11{
    position absolute
    top 2.6rem
    right 1rem
}
.star12{
    position absolute
    top: 0.6rem;
    right: 3rem;
}
.star13{
    position absolute
    top 4rem
    right .4rem
}
.star14{
    position absolute
    top: 1.55rem;
    right: 1.4rem;
}
.star15{
    position absolute
    top: 5.6rem;
    left: 3.4rem;
}
.star16{
    position absolute
    top: 1rem;
    left: 1.4rem;
}
.star17{
    position absolute
   top: 4.3rem;
    left: 40%;
}
.star18{
    position absolute
   top: 3.6rem;
    left: 0.7rem;
}
.star19{
    position absolute
    top: 0.6rem;
    left: 2.4rem;
}
.star20{
    position absolute
    top: 1.6rem;
    left: 0.6rem;
}
.star21{
    position absolute
    top 2.6rem
    left 1.4rem
}
.star22{
    position absolute
    top: 0.6rem;
    left: 0.4rem;
}
.star23{
    position absolute
    top: 4.9rem;
    right: 2rem;
}
.star24{
    position absolute
    top: 5.2rem;
    left: 1.4rem;
}
.star25{
    position absolute
    top: 3.5rem;
    right: 1.9rem;
}
.star26{
    position absolute
    top: 0.6rem;
    left: 3.4rem;
}
.star27{
    position absolute
    top: 4.3rem;
    left: 2rem;
}
.star11>img{
    width 1.21rem
}
.star12>img{
    width .44rem
}
.star13>img{
    width 1.51rem
}
.star14>img{
    width .54rem
}
.star15>img{
    width .54rem
}
.star16>img{
    width .52rem
}
.star17>img{
    width .94rem
}
.star18>img{
    width .68rem
}
.star19>img{
    width .46rem
}
.star20>img{
    width .44rem
}
.star21>img{
    width 1.04rem
}
.star22>img{
    width .37rem
}
.star23>img{
    width .69rem
}
.star24>img{
    width .66rem
}
.star25>img{
    width .57rem
}
.star26>img{
    width .92rem
}
.star27>img{
    width .61rem
}
.nickName{
    width 100%
    text-align center
    line-height .5rem
    height .5rem
    color #fff
    font-size .24rem
}
.friend{
    position absolute
    bottom 2rem
    width 100%
}
.starBtn{
    width 100%
    text-align center
}
.starBtn>img{
    width 1.89rem
    height 1.93rem
}
.point{
    width 100%
    height 1rem
    text-align center
}
.point>img{
    animation beat  1s infinite
    width .34rem
    height .58rem
}
.friend>p{
    color #fff
    font-size .28rem
    text-align center
    line-height .5rem
}
.personal{
    position absolute
    bottom 1rem
    width 100%
}
.assist{
    width 100%
    color #ffffff
    font-size .28rem
    text-align center
}
.assist_p{
    display flex
    justify-content center
    max-width 7rem
    overflow hidden
    margin .3rem auto
}
.assist_p>span{
   display block
}
.assist_p>span>img{
    width .8rem
    border-radius 50%
    padding .1rem
}
.harvest{
    width 100%
    text-align center
}
.harvest>img{
    width 2.27rem
    height .66rem
}
.light{
    animation: scales 1s infinite;
}
@keyframes scales {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  20% {
    transform: scale(1.1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }

  80% {
    transform: scale(1.1);
    opacity: 0.85;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.return{
    position absolute
    bottom  1.2rem
    right 0
    width: 1.2rem
    text-align center
    vertical-align middle
}
.return>img{
    width: .81rem
    // width: 100%
    height: .81rem
}
.retext{
  line-height .5rem
  font-size .24rem
  color #fff
}
.myPrize{
    padding-top .3rem
    width 100%
    margin 0 auto
    text-align center
}
.myPrize>img{
    width .7rem
    height .98rem
}
@keyframes beat {
    25% {
        transform: translateY(.2rem);
    }

    50%, 100% {
        transform: translateY(0rem);
    }

    75% {
        transform: translateY(.2rem);
    }
}
</style>


